<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">购物车</block>
		</cu-custom>			
		<view class="shop" v-if="list.length" @click="edit">
			<view>共计{{ list.length }}条记录</view>
			<image class="edit" :src="isEdit ? '/static/edit_act.png' : '/static/edit.png'"></image>
		</view>
		<view class="list" v-if="shop.type === 5">
			<view class="item" v-for="(item, idx) in list" :key="idx">
				<view class="swipe" :style="{ transform: 'translate3d('+item.transform+'px,0,0)' }" @touchstart="start" @touchend="end($event, idx)" @touchmove="move($event,idx)">
					<view class="radio">
						<checkbox @tap="select(item, idx)" class='round red' :class="item.checked ? 'checked' : ''" :checked="item.checked"></checkbox>						
					</view>
					<view class="content">
						<image :src="item.default_imgurl"></image>
						<view class="desc">
							<view class="title">
								<text v-if="!isEdit">{{ item.pname }}</text>
								<uni-number-box v-else :type="1" :min="1" :value="item.rcount" @change="buyNum($event,idx)"></uni-number-box>
							</view>
							<view class="attr_name">
								{{ item.prope }}
							</view>
							<view class="price">
								<text>&yen;{{ item.now_price }}</text>
								<text v-if="!isEdit">x{{ item.rcount }}</text>
							</view>
						</view>
					</view>					
				</view>
				<view :class="['delete', {act: isEdit}]"  @tap="deletePro(idx)">删除</view>
			</view>
		</view>
		<view v-if="shop.type === 1" class="list">
			<view class="el" v-for="(item, index) in list" :key="item.id" v-if="item.list.length">
				<view class="tx">
					<view>
						<text class="lg text-black icon-shopfill"></text>{{ item.shop.shop_name }}
					</view>
				</view>
				<view class="x_p" v-for="(x, idx) in item.list" :key="idx">
					<view class="item">
						<view class="swipe">
							<view class="radio">
								<checkbox @tap="select(x, idx)" class='round red' :class="x.checked ? 'checked' : ''" :checked="x.checked"></checkbox>						
							</view>
							<view class="content">
								<image :src="x.default_imgurl"></image>
								<view class="desc">
									<view class="title">
										<text v-if="!isEdit">{{ x.name }}</text>
										<uni-number-box v-else :type="1" :min="1" :value="x.rcount" @change="buyNum($event, index, idx)"></uni-number-box>
									</view>
									<view class="attr_name">
										{{ x.prope }}
									</view>
									<view class="price">
										<text>&yen;{{ x.now_price }}</text>
										<text v-if="!isEdit">x{{ x.rcount }}</text>
									</view>
								</view>
							</view>					
						</view>
						<view :class="['delete', {act: isEdit}]"  @tap="deletePro(idx, index)">删除</view>						
					</view>
				</view>
			</view>
		</view>
		<view class="tool" v-if="list.length">
			<label @tap="selectAll">
			<checkbox class='round red' :class="All ? 'checked' : ''" :checked="All"></checkbox>				
			全选</label>
			<view class="info">
				<view class="money" v-if="!isEdit">
					<view>合计:<text class="total">&yen;{{ totalPrice }}</text></view>
<!-- 					<view class="desc">不含运费</view> -->
				</view>
				<view :class="['btn', { act: act }]" v-if="!isEdit" @tap="toPay">结算</view>
				<view :class="['btn', { act: act }]" v-else @tap="deletePro()">删除</view>
			</view>
		</view>
		<empty-data v-if="!list.length" src="/static/cart-empty.png"></empty-data>
	</view>
</template>

<script>
	let wd = uni.upx2px(120)
	import uniNumberBox from '@/components/uni-number-box'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				All: false,
				isEdit: false,
				act: false,
				num: 1,
				startX: 0, // 开始触摸位置
				endX: 0, // 结束触摸位置
				moveX: 0, // 滑动时的位置
				disX: 0 ,// 移动距离
				transform: 0, //
				list: []
			};
		},
		components: {
			uniNumberBox
		},
		onShow() {
			const list = uni.getStorageSync('ShopCart') || []
			this.list = list
		},
		watch: {
			list: {
				handler: function (val, oldVal) {
					let isCheck = false, el = false
					if (this.shop.type === 5) {
						isCheck = val.every(item => item.checked)
						el = val.some(item => item.checked)						
					} else if (this.shop.type === 1) {
						isCheck= val.every(item => item.list.every(x => x.checked))
						el = val.some(item => item.list.some(x => x.checked))
					}
					isCheck ? this.All = true : this.All = false
					el ? this.act = true : this.act = false	
				},
				deep: true
			}
		},
		computed: {
			totalPrice () {
				if (this.list.length) {
					let total = 0, list= []
					if (this.shop.type === 5) {
						list = this.list.filter(item => item.checked)						
					} else if (this.shop.type === 1) {
						list = this.list.map(item => {
							let a = item.list.map(k => {
								let o = Object.assign({}, k)
								return o
							})
							return a
						}).reduce((total, item) => total.concat(item), []).filter(item => item.checked)						
					}
					total = list.reduce((total, item) => this.utils.accAdd(total, this.utils.accMul(item.now_price, item.rcount)), 0)
					return this.utils.Fxied(total)				
				}
				return '0.00'
			},
			...mapGetters([
				'userInfo',
				'shop'
			])
		},
		methods: {
			toPay () {
				if (this.act) {
					uni.setStorageSync('buyAddr', '') // 清除收货地址ID
					this.userInfo.id ? uni.navigateTo({ url: '/pages/orders/create?type=1' }) : uni.navigateTo({ url: '/pages/login/index' })					
				}
			},
			edit () {
				this.isEdit = !this.isEdit
				this.list.forEach(item => {
					if (this.isEdit) item.transform = 0
				})
			},
			start (e) {
				if (e.touches.length === 1 && !this.isEdit) this.startX = e.touches[0].clientX // 记录开始位置
			},
			move (e,idx) {
				if (e.touches.length === 1 && !this.isEdit) {
					this.list.forEach((item, i) => {
						if (i !== idx) item.transform = 0
					})
					// 滑动时距离浏览器走侧实时距离
					this.moveX = e.touches[0].clientX
					// 起始位置减去 实时的滑动的距离 得到手指实时偏移距离
					this.disX = this.startX - this.moveX
					// 如果是向右滑动或者不滑动，不改变滑块的位置
					if (this.disX < 0 || this.disX === 0) {
						this.list[idx].transform = 0
					} else if (this.disX > 0) {
						// 具体滑动距离 手指偏移距离 * 5
						this.list[idx].transform = -this.disX
						if (this.disX >= wd) this.list[idx].transform = -wd
					}
				}
			},
			end (e,idx) {
				if (e.mp.changedTouches.length === 1 && !this.isEdit) {
					let endX = e.mp.changedTouches[0].clientX
					this.disX = this.startX - endX
					// 如果距离小于删除按钮的一半，强行回到起点
					if (this.disX < wd / 2) {
						this.list[idx].transform = 0
					} else {
						this.list[idx].transform = -wd
					}
				}
			},
			select (item, idx) {
				item.checked = !item.checked
				uni.setStorageSync('ShopCart', this.list)
			},
			selectAll () {
				let flag = false
				if (this.shop.type === 5) {
					flag = this.list.every(item => item.checked)
				} else if (this.shop.type === 1) {
					flag = this.list.every(item => item.list.every(k => k.checked))
				}
				if (flag) {
					this.list.forEach((item, idx) => {
						item.list.forEach(k => {
							k.checked = false
						})
					})
				} else {
					this.list.forEach((item, idx) => {
						item.list.forEach(k => {
							k.checked = true
						})
					})
				}
				uni.setStorageSync('ShopCart', this.list)
			},
			buyNum (val,index, idx) {
				if (this.shop.type === 5) {
					this.list[index].rcount = val
				} else if (this.shop.type === 1) {
					this.list[index].list[idx].rcount = val
				}
				uni.setStorageSync('ShopCart', this.list)
			},
			deletePro (idx, index) {
				if (idx !== undefined) {
					uni.showModal({
						content: '确认删除这个商品吗？',
						success: rst => {
							if (rst.confirm) {
								if (this.shop.type === 5) {
									this.list = this.list.filter((item, i) => i !== idx)
								} else if (this.shop.type === 1) {
									this.list = this.list.map((item, i) => {
										if (i === index) {
											item.list = item.list.filter((k, x) => x !== idx)
										}
										return item
									}).filter(item => item.list.length)
								}
								uni.setStorageSync('ShopCart', this.list)
							}
						}
					})					
				} else {
					if (this.act) {
						let num = 0
						if (this.shop.type === 5) {
							num = this.list.filter(item => item.checked).length
						} else if (this.shop.type === 1) {
							num = this.list.map(item => {
								let a = item.list.map(k => {
									let o = Object.assign({}, k)
									return o
								})
								return a
							}).reduce((total, item) => total.concat(item), []).filter(item => item.checked).length
						}						
						uni.showModal({
							content: `确认删除这个${num}商品吗`,
							success: rst => {
								if (rst.confirm) {
									if (this.shop.type === 5) {
										this.list = this.list.filter(item => !item.checked)
									} else if (this.shop.type === 1) {
										this.list = this.list.map(item => {
											item.list = item.list.filter(k => !k.checked)
											return item
										})
									}
									uni.setStorageSync('ShopCart', this.list)
								}
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';
.shop {
	height: @height;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background:white;
	padding: 0 15upx;
	font-size: 24upx;
	.border-bottom;
	.edit {
		width: 36upx;
		height: 36upx;
	}
}
.tool {
	z-index: 666;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: @height;
	position: fixed;
	/* #ifdef H5 */
	bottom: 50px;
	/* #endif */
	/* #ifndef H5 */
	bottom: 0;
	/* #endif */
	width: 100%;
	background-color:white;
	box-sizing: border-box;
	padding: 0 0 0 15upx;
	checkbox {
		margin-right: 10upx;
	}
	.info {
		display: flex;
		justify-content: space-between;
		height: 100%;
		.money {
			display: flex;
			flex-direction: column;
			flex-flow: column;
			margin: 6upx 0;
			box-sizing: border-box;
			& > view { flex: 1;font-size:@minSize; } 
			.total {
				color:@red;
				font-weight: bold;
				padding-left: 15upx;
			}
		}
		.btn {
			background-color:#dcdcdc;
			color:@gray;
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0 70upx;
			margin-left: 10upx;
			&.act {
				background-color:@red;
				color:white;
			}
		}
	}
}
.list {
	padding-bottom: calc(@height + 15upx);
	.tx {
		padding: 10upx 15upx;
		& > view {
			display: flex;
			align-items: center;
			.lg {
				font-size: 40upx;
				margin-right: 10upx;
			}		
		}
	}
	.x_p {
		&:not(:last-of-type) {
			margin-bottom: 1px;
		}
	}
	.item {
		display: flex;
		position: relative;
		background-color:white;
		.swipe {
		    padding: 15upx 0;			
		    background-color:white;			
			flex: 1;
			display: flex;
			position: relative;
			z-index: 99;
			transition: transform .3s;
			.radio{
				display: flex;
				align-items: center;
				width: 80upx;
				justify-content: center;
			}
			.content {
				display: flex;
				flex: 1;
				image {
					width: 150upx;
					height: 150upx;
				}
				.desc {
					flex: 1;
					display: flex;
					flex-direction: column;
					flex-flow: column;
					justify-content: space-between;
					margin-left: 20upx;
					.title {
						.twoLine(2)
					}
					.price {
						display: flex;
						justify-content: space-between;
						align-items: center;
						text {
							&:nth-of-type(1) {
								color:@red
							}
							&:nth-of-type(2) {
								color:@gray;
								padding-right: 20upx;
								font-size:@minSize;
							}
						}
					}
					.attr_name {
						font-size:@minSize;
						color:@gray;
					}
				}
			}			
		}
		&:not(:last-of-type) {
			margin-bottom: 2upx;
		}
	}
	.delete {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		background-color:@red;
		color:white;
		display: flex;
		align-items: center;
		width: 120upx;
		justify-content: center;
		z-index: 11;
		&.act {
			position: relative;
			height: auto;
		}
	}
}
</style>
